<template>
  <div class="rule">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/params/rule' }"
        >规格与包装</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="search">
      <el-input
        v-model="keyword"
        :placeholder="$t('text.goodsplace')"
      ></el-input>
      <el-button type="primary" @click="toSearch">{{
        $t("btn.search")
      }}</el-button>
      <el-button type="primary" @click="addParams">{{
        $t("btn.add")
      }}</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        align="center"
        prop="id"
        label="规格参数ID"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="itemCatId"
        label="类目ID"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="paramData"
        label="规格参数"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('goodstitle.goodsAction')"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            style="margin-right: 10px"
            >{{ $t("btn.edit") }}</el-button
          >
          <el-popconfirm
            :title="$t('goodstitle.delText')"
            @confirm="handlerDelete(scope.$index, scope.row)"
          >
            <el-button size="mini" type="danger" slot="reference">{{
              $t("btn.del")
            }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <Pagination :total="total" :pageSize="pageSize" @changePage="getPageNum" :currentPage="currentPage" />
    <!-- 添加弹窗 -->
    <ParamsDialog ref="dialog" />
    <!-- 编辑弹窗 -->
    <EditDialog ref="editDialog" :rowParamsData="rowParamsData"/>
  </div>
</template>

<script>
import { getParams, getParamsSearch, deleteParams } from "@/api";
import Pagination from "@/components/Pagination";
import ParamsDialog from "./ParamsDialog";
import EditDialog from "./EditDialog";
export default {
  components: {
    Pagination,
    ParamsDialog,
    EditDialog
  },
  data() {
    return {
      keyword: "",
      tableData: [],
      type: 1, // 分页类型：1、所有商品分页 2、搜索出来的商品分页
      searchList: [],
      currentPage: 1, // 当前高亮页
      total: 1,
      pageSize: 1,
      rowParamsData: {}
    };
  },
  mounted() {
    this.getParamsData();
  },
  methods: {
    async getParamsData(page) {
      let res = await getParams({ page });
      if (res.status === 200) {
        this.tableData = res.data;
        this.total = res.total;
        this.pageSize = res.pageSize;
      }
    },
    getPageNum(page) {
      this.currentPage = page;
      if (this.type === 1) {
        // 所有商品分页
        this.getParamsData(page);
      } else {
        // 搜索商品分页
        this.tableData = this.searchList.slice((page - 1) * 7, page * 7);
      }
    },
    async toSearch() {
      this.currentPage = 1;
      let { keyword } = this;
      if (!keyword) {
        // 输入关键字为空
        this.getParamsData(1);
        return false;
      }
      let res = await getParamsSearch({ search: keyword });
      if (res.status === 200) {
        this.tableData = res.result;
        this.searchList = res.result;
        // 后端没有搜索的分页，前端模拟分页
        this.tableData = res.result.slice(0, 7);
        this.total = res.result.length; //查询数目总条数
        this.pageSize = 7;
        this.type = 2;
      } else {
        // 无数据处理
        this.tableData = [];
        this.total = 1;
        this.pageSize = 1;
      }
    },
    addParams() {
      this.$refs.dialog.dialogVisible = true;
    },
    handleEdit(index, row) {
      this.$refs.editDialog.dialogVisible = true;
      this.rowParamsData = {...row};
    },
    async handlerDelete(index, row) {
      let id = row.id;
      let res = await deleteParams({id});
      if (res.status === 200) {
        this.getParamsData(1);
        this.$message({
          type: "success",
          message: "删除成功",
        });
      } else {
        this.$message({
          type: "error",
          message: "删除失败",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.rule {
  padding: 20px;
  .search {
    display: flex;
    margin: 10px 0;

    button {
      margin-left: 10px;
    }
  }
}
</style>
